<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="layout">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rejoice - 豆瓣FM</title>
    <link rel="stylesheet" href="/css/user-guide.css">
</head>

<body>
<div th:fragment="content">
<div class="app">
    <div class="outer">
        <div class="login"><a href="#" class="_1korYn_5tnD1dVOmoqEuye">
            <!-- react-text: 746 -->已有账号登录
            <!-- /react-text -->
            <!-- react-text: 747 -->&nbsp;
            <!-- /react-text --><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                     viewBox="0 0 9 16" style="transform: rotate(360deg); vertical-align: middle;">
            <path fill="#2f9842" fill-rule="evenodd"
                  d="M.3 14.3c-.4.4-.4 1.02 0 1.4.38.4 1 .4 1.4 0l7-7c.4-.4.4-1.02 0-1.4l-7-7C1.3-.1.68-.1.3.3c-.4.38-.4 1 0 1.4L6.6 8 .3 14.3z">
            </path>
        </svg></a></div>
        <h1 class="app-title">挑选你喜欢的艺术家，开启私人音乐之旅</h1>
        <div class="singerlist">
            <div class="singer" th:each="singer:${singers}">
                <div class="cover" th:style="'background-image:url('+${singer.getAvator()}+')'">
                    <div class="mask">
                        <svg
                                width="2em"
                                height="2em"
                                viewBox="0 0 16 16"
                                class="bi bi-check-circle"
                                fill="currentColor"
                                xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                    fill-rule="evenodd"
                                    d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
                            />
                            <path
                                    fill-rule="evenodd"
                                    d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"
                            />
                        </svg>
                    </div>
                </div>
                <div class="singername" th:text="${singer.getName()}">Adele</div>
                <a class="_2XvVUqTDWKrkmCkClWsj95">喜欢</a>
            </div>

        </div>
        <div class="search"><a class="_2oxtlixj67tYjIXy5PFxwS" href="/user-guide" style="margin-right: 40px;"><svg
                title="Title" viewBox="0 0 12 11" height="14" width="14"
                style="vertical-align: middle; margin-right: 5px; top: -1px; position: relative;">
            <desc>Icon</desc>
            <g id="图形" fill="#8f8e94">
                <path
                        d="M0.832073656,2.60131671 C2.43834081,0.0237555111 5.8542967,-0.773954266 8.44664501,0.82346609 C10.4990243,2.08832685 11.4729501,4.49599991 10.9092115,6.79327051 L11.867957,7.25553679 C11.9441638,7.29271017 11.9946029,7.36738809 11.999626,7.45172502 C12.003983,7.52895568 11.9700563,7.60286089 11.909127,7.64978986 C11.9035489,7.65412261 9.40559869,9.24377438 9.40559869,9.24377438 C9.33585812,9.28770906 9.2484812,9.29259376 9.17461947,9.25587574 C9.10086876,9.21958548 9.05153971,9.14701873 9.04540654,9.06501377 L8.82436251,6.17654294 C8.81822934,6.09343409 8.85638823,6.01320914 8.92646182,5.96615597 C8.99598037,5.91921319 9.08502241,5.91256228 9.16078514,5.94907332 L10.038731,6.37295194 C10.4050702,4.52741929 9.59764197,2.63016955 7.95253599,1.61630498 C5.80006945,0.289516196 2.9632406,0.95173771 1.6287896,3.09243581 C0.982600066,4.12949579 0.781190512,5.35440965 1.06148488,6.54216393 C1.34201515,7.72990442 2.07054464,8.73800117 3.11330909,9.3805873 C4.13609217,10.0106305 5.34590929,10.2161328 6.52010683,9.95947919 C6.77284355,9.90410548 7.02290221,10.0631203 7.07880846,10.3146685 C7.11864634,10.496313 7.04622771,10.676964 6.90741261,10.7838202 C6.85451746,10.8246502 6.79136796,10.8549519 6.72140537,10.8701442 C5.3074035,11.179398 3.85064981,10.9320584 2.61931107,10.173302 C1.36366166,9.39967075 0.486270874,8.18574055 0.148502282,6.75565559 C-0.18926631,5.32512907 0.053549098,3.8501987 0.832073656,2.60131671 Z"
                        id="Shape"
                        transform="translate(6.000000, 5.500000) scale(1, -1) translate(-6.000000, -5.500000) ">
                </path>
            </g>
        </svg><!-- react-text: 759 -->换一批
            <!-- /react-text --></a><a class="_2oxtlixj67tYjIXy5PFxwS" href="#"><svg title="Title"
                                                                                     viewBox="0 0 23 23" height="18" width="18" class="icon"
                                                                                     style="vertical-align: middle; margin-right: 6px; position: relative; top: -1px;">
            <desc>Icon</desc>
            <g id="icon" fill="none" fill-rule="evenodd">
                <defs>
                    <path id="path-1" d="M2.134 5.113H0V.173h4.269v4.94H2.134z"></path>
                </defs>
                <g id="Page-1" transform="matrix(-1 0 0 1 19.469 4)">
                    <path
                            d="M8.004 1.023c-.17 0 .66.007-.51.022a5.685 5.685 0 0 0-3.897 2.048 5.797 5.797 0 0 0-1.321 4.23 5.775 5.775 0 0 0 2.028 3.935 5.669 5.669 0 0 0 4.19 1.334 5.688 5.688 0 0 0 3.897-2.048 5.798 5.798 0 0 0 1.321-4.231 5.778 5.778 0 0 0-2.028-3.934 5.666 5.666 0 0 0-3.68-1.356m-.021 12.614a6.663 6.663 0 0 1-4.33-1.596 6.793 6.793 0 0 1-2.386-4.629 6.817 6.817 0 0 1 1.554-4.976A6.688 6.688 0 0 1 7.405.026a6.663 6.663 0 0 1 4.93 1.57 6.793 6.793 0 0 1 2.386 4.628 6.817 6.817 0 0 1-1.554 4.977 6.69 6.69 0 0 1-5.184 2.436"
                            id="Fill-1" fill="#8f8e94"></path>
                    <g id="Group-5" transform="translate(0 11.226)">
                        <mask id="mask-2" fill="white">
                            <use xlink:href="#path-1"></use>
                        </mask>
                        <path
                                d="M.506 5.113a.504.504 0 0 1-.325-.12.515.515 0 0 1-.063-.72L3.374.356a.503.503 0 0 1 .714-.062.514.514 0 0 1 .062.72L.895 4.93a.505.505 0 0 1-.389.182"
                                id="Fill-3" fill="#8f8e94" mask="url(#mask-2)"></path>
                    </g>
                </g>
            </g>
        </svg><!-- react-text: 772 -->自己搜
            <!-- /react-text --></a></div>
        <div class="choice">
            <div class="_3wQsCkO78YP-Ive7LioKOU">
                <div class="cover Vd8AgkGBJfTTvwfk6kNBD"
                     style="height: 42px; width: 42px; background-image: url(&quot;//img1.doubanio.com/f/fm/ccf59e9485e4db05d7bc6df8931a67f925636f91/pics/fm/artist/default_avatar/person_small.png&quot;); border-radius: 50%; display: inline-block; border: 1px solid rgb(225, 225, 225);">
                    <div class="cBI7Gi0qgyW-N7EMR50Ei" style="line-height: 42px; height: 42px; opacity: 0;"><svg
                            title="Title" viewBox="0,0,13,13" height="30" width="30" class="_1pM2V3E71aKlTpVhaCVPoi"
                            style="vertical-align: middle;">

                    </svg></div>
                </div>
                <div class="_30eA36xjbPbpGBNKTHd1Zc"></div>
            </div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div class="dump">
                <p><a class="_2v_c01woP-q49Tpi3piSHr" href="/index">
                    <!-- react-text: 837 -->跳过，直接去听歌
                    <!-- /react-text -->
                    <!-- react-text: 838 -->&nbsp;
                    <!-- /react-text --><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                             viewBox="0 0 9 16"
                                             style="transform: rotate(360deg); vertical-align: middle; position: relative; top: -1px;">
                    <path fill="#C6C6C6" fill-rule="evenodd"
                          d="M.3 14.3c-.4.4-.4 1.02 0 1.4.38.4 1 .4 1.4 0l7-7c.4-.4.4-1.02 0-1.4l-7-7C1.3-.1.68-.1.3.3c-.4.38-.4 1 0 1.4L6.6 8 .3 14.3z">
                    </path>
                </svg></a></p>
            </div>
        </div>
    </div>
</div>
    <script>
        let like = document.querySelectorAll("._2XvVUqTDWKrkmCkClWsj95");
        let masks = document.querySelectorAll(".mask");
        let singers =document.querySelectorAll(".singer .cover");
        let choice = document.querySelector("._3wQsCkO78YP-Ive7LioKOU");
        console.log(choice);
        console.log(like);
        let singerData = [];
        for (let i = 0; i < like.length; i++) {
            like[i].addEventListener("click", function () {
                let item = like[i];
                if (item.innerHTML === "喜欢") {
                    item.innerHTML = "已喜欢";
                    masks[i].style.display = "block";
                    createDom(singers[i].style.backgroundImage);
                } else {
                    item.innerHTML = "喜欢";
                    masks[i].style.display = "none";

                }
            });
        }

        function createDom(item){
            let singerItemHtml = `<div
    class="cover Vd8AgkGBJfTTvwfk6kNBD"
    style="
      height: 42px;
      width: 42px;
      background-image: ${item};
      border-radius: 50%;
      display: inline-block;
      border: 1px solid rgb(225, 225, 225);
    "
    >
    <div
      class="cBI7Gi0qgyW-N7EMR50Ei"
      style="line-height: 42px; height: 42px; opacity: 0"
    >
      <svg
        title="Title"
        viewBox="0,0,13,13"
        height="30"
        width="30"
        class="_1pM2V3E71aKlTpVhaCVPoi"
        style="vertical-align: middle"
      ></svg>
    </div>
    </div>`;
            let div = document.createElement("DIV");
            div.innerHTML = singerItemHtml;
            choice.appendChild(div);
        }

    </script>
</div>

</body>

</html>